<template>
  <d2-container>
    <template slot="header">
      <div style="display: flex;width: 100%">
        <div class="search" style="display: flex;justify-content: space-around;width: 50%;">
          <div class="search_box" style="display: flex;justify-content: space-around;width: 100%">
            <div class="search_uid" >
              <el-input v-model="house.hid" placeholder="请输入房间ID" ></el-input>
            </div>
            <div class="search_telephone" style="margin: 0 10px">
              <el-input v-model="house.uid" placeholder="请输入用户Id"></el-input>
            </div>
          </div>
          <div class="search_button">
            <el-button type="primary" @click="search_info">点击查询</el-button>
          </div>
        </div>
        <div>
          <el-button type="primary" style="margin-left: 20px" @click="addHouse">点击添加数据</el-button>
        </div>
        <div>
          <el-button type="primary" style="margin-left: 20px" @click="Refresh">点击刷新页面</el-button>
        </div>
      </div>
    </template>
    <template>
      <el-table
              :data="tableData"
              stripe
              style="width: 100%">
        <el-table-column
                prop="hid"
                label="房Id"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="uid"
                label="用户Id"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="htitle"
                label="标题"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="fb_time"
                label="发布时间"
                align = "center">
          <template slot-scope="scope">
            {{ new Date(parseInt(scope.row.fb_time))|moment('YYYY-MM-DD hh:mm') }}
          </template>
        </el-table-column>
        <el-table-column
                prop="hsquare"
                label="面积"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="htype"
                label="户型"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="haddress"
                label="地址"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="lng_lat"
                label="经纬度"
                align = "center">
          <template slot-scope="scope">
            <el-popover
                    placement="right"
                    width="400px"
                    trigger="click">
              <baidu-map
                      style="width:400px;height: 200px"
                      scroll-wheel-zoom
                      :center="marplace"
                      :zoom="12"
              >
                <bm-marker :position="marplace" :dragging="true">
                  <bm-label content="房屋所在位置" :labelStyle="{color: 'red', fontSize : '15px'}" :offset="{width: -35, height: 30}"/>
                </bm-marker>
              </baidu-map>
              <el-button slot="reference" style="width: 100%;padding: 12px 6px">位置详情</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
                prop="tv"
                label="电视"
                align = "center">
          <template slot-scope = "scope">
            {{ scope.row.tv == 1 ? '有':'没有' }}
          </template>
        </el-table-column>
        <el-table-column
                prop="xyj"
                label="洗衣机"
                align = "center">
          <template slot-scope = "scope">
            {{ scope.row.xyj == 1 ? '有':'没有' }}
          </template>
        </el-table-column>
        <el-table-column
                prop="sfa"
                label="沙发"
                align = "center">
          <template slot-scope = "scope">
            {{ scope.row.sfa == 1 ? '有':'没有' }}
          </template>
        </el-table-column>
        <el-table-column
                prop="kdai"
                label="宽带"
                align = "center">
          <template slot-scope = "scope">
            {{ scope.row.kdai == 1 ? '有':'没有' }}
          </template>
        </el-table-column>
        <el-table-column
                prop="have"
                label="是否住满"
                align = "center">
          <template slot-scope = "scope">
            {{ scope.row.have == 1 ? '已住满':'未住满' }}
          </template>
        </el-table-column>
        <el-table-column
                prop="you_can"
                label="整租/分租"
                align = "center">
          <template slot-scope = "scope">
            {{ scope.row.you_can == 1 ? '整租':'分租' }}
          </template>
        </el-table-column>
        <el-table-column
                prop="z_pay"
                label="整租价格"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="f_pay"
                label="分租价格"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="paytype"
                label="支付类型"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="address"
                label="操作"
                width="150px"
                align="center"
        >
          <template slot-scope="scope">
            <el-button @click="showMap(scope.row.hid)" type="text" size="small">选择位置</el-button>
            <el-button type="text" size="small" @click="editHouse(scope.row.hid)">编辑</el-button>
            <el-button @click="deleteHouse(scope.row.hid)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!--百度地图-->
    <el-dialog
            title="更改位置信息"
            :visible.sync="mapdialog"
            align="center"
    >
      <el-row>
        <el-col :span="24">
          <baidu-map
                  style="width:100%;height: 350px"
                  scroll-wheel-zoom
                  center="南宁市"
                  :zoom="12"
                  @click="pointChange"
          >
            <bm-marker :position="marplace" :dragging="true">
              <bm-label content="房屋所在位置" :labelStyle="{color: 'red', fontSize : '15px'}" :offset="{width: -35, height: 30}"/>
            </bm-marker>
          </baidu-map>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="margin-top: 30px">
          <el-button type="primary" @click="postPlace">提交当前地址</el-button>
        </el-col>
      </el-row>
    </el-dialog>

    <!--添加房源 dialog-->
    <el-dialog
            title="添加房源数据"
            :visible.sync="addHousedialog"
            align="center"
            width="40%"
    >
      <el-form ref="form" :model="addhouse" label-width="80px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="用户Id">
                <el-input v-model="addhouse.uid"></el-input>
              </el-form-item>
              <el-form-item label="标题">
                <el-input v-model="addhouse.htitle"></el-input>
              </el-form-item>
              <el-form-item label="面积">
                <el-input v-model="addhouse.hsquare"></el-input>
              </el-form-item>
              <el-form-item label="户型">
                <el-input v-model="addhouse.htype"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-form-item label="地址" >
                <el-cascader
                        :options="options"
                        v-model="selectedOptions"
                        @change="placeChange"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="整租价格">
                <el-input v-model="addhouse.z_pay"></el-input>
              </el-form-item>
              <el-form-item label="分租价格">
                <el-input v-model="addhouse.f_pay"></el-input>
              </el-form-item>
              <el-form-item label="支付类型">
                <el-input v-model="addhouse.paytype"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="电视">
              <el-radio-group v-model="addhouse.tv">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">没有</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="洗衣机">
              <el-radio-group v-model="addhouse.xyj">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">没有</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="沙发">
              <el-radio-group v-model="addhouse.sfa">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">没有</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="宽带">
              <el-radio-group v-model="addhouse.kdai">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">没有</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否住满">
              <el-radio-group v-model="addhouse.have">
                <el-radio :label="1">已住满</el-radio>
                <el-radio :label="0">未住满</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="分租/整租">
              <el-radio-group v-model="addhouse.you_can">
                <el-radio :label="1">整租</el-radio>
                <el-radio :label="0">分租</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-upload
                    class="upload-demo"
                    action="http://192.168.3.11:7001/house/upload"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :on-success="uploadok"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <el-form-item style="margin: 0;">
              <el-button type="primary" @click="confirmAdd">确认添加</el-button>
              <el-button @click="addHousedialog = false">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <!--修改房源数据-->
    <el-dialog
            title="编辑房源数据"
            :visible.sync="editHousedialog"
            align="center"
            width="50%"
    >
      <el-form ref="form" :model="edithouse" label-width="70px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="用户Id">
                <el-input v-model="edithouse.uid"></el-input>
              </el-form-item>
              <el-form-item label="标题">
                <el-input v-model="edithouse.htitle"></el-input>
              </el-form-item>
              <el-form-item label="面积">
                <el-input v-model="edithouse.hsquare"></el-input>
              </el-form-item>
              <el-form-item label="户型">
                <el-input v-model="edithouse.htype"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-form-item label="地址">
                <el-input v-model="edithouse.haddress"></el-input>
              </el-form-item>
              <el-form-item label="整租价格">
                <el-input v-model="edithouse.z_pay"></el-input>
              </el-form-item>
              <el-form-item label="分租价格">
                <el-input v-model="edithouse.f_pay"></el-input>
              </el-form-item>
              <el-form-item label="支付类型">
                <el-input v-model="edithouse.paytype"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row lab>
          <el-col :span="12">
            <el-form-item label="电视">
              <el-radio-group v-model="edithouse.tv">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">没有</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="洗衣机">
              <el-radio-group v-model="edithouse.xyj">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">没有</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="沙发">
              <el-radio-group v-model="edithouse.sfa">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">没有</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="宽带">
              <el-radio-group v-model="edithouse.kdai">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">没有</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否住满">
              <el-radio-group v-model="edithouse.have">
                <el-radio :label="1">已住满</el-radio>
                <el-radio :label="0">未住满</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="整租/分租" label-width="80px">
              <el-radio-group v-model="edithouse.you_can">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">没有</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="24">
            <el-upload
                    class="upload-demo"
                    action="http://192.168.3.11:7001/house/upload"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :on-success="uploadok"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item style="margin-top: 20px">
              <el-button type="primary" @click="confirmEdit">确认修改</el-button>
              <el-button @click="editHousedialog = false">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!--删除房源-->
    <el-dialog
            title="警告！"
            :visible.sync="dialogVisible"
            width="30%"
    >
      <span>数据删除后将无法恢复，是否确认删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>

    <template slot="footer">
      <template>
        <div class="block">
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20, 30, 40]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
          </el-pagination>
        </div>
      </template>
    </template>
  </d2-container>
</template>

<script>
  import Vue from 'vue'
  import BaiduMap from 'vue-baidu-map'

  Vue.use(BaiduMap, {
    ak: '5iDoru4iDeqlKnVVbhCqzaDsKNuYtljK'
  });
  export default {
    name: "houseManagement",
    data () {
      return {
        marplace:{
          lng: 108.381503,
          lat: 22.814079
        },
        dialogVisible: false,
        mapdialog: false,
        addHousedialog: false,
        editHousedialog: false,
        searchHouseId: '',
        searchUserId: '',
        delHouseId: '',
        editHouseId: '',
        house: {
          hid: '',
          uid: '',
          htitle: '',
          fb_time: '',
          hsquare: '',
          htype: '',
          haddress: '',
          city: '',
          area: '',
          lng_lat: '',
          tv: '',
          xyj: '',
          sfa: '',
          kdai: '',
          have: '',
          you_can: '',
          z_pay: '',
          f_pay: '',
          paytype: '',
        },
        addhouse: {
          uid: '',
          htitle: '',
          hsquare: '',
          htype: '',
          haddress: '',
          city: '',
          area: '',
          tv: '',
          xyj: '',
          sfa: '',
          kdai: '',
          have: '',
          you_can: '',
          z_pay: '',
          f_pay: '',
          paytype: '',
        },
        edithouse: {
          uid: '',
          htitle: '',
          hsquare: '',
          htype: '',
          haddress: '',
          city: '',
          area: '',
          tv: '',
          xyj: '',
          sfa: '',
          kdai: '',
          have: '',
          you_can: '',
          z_pay: '',
          f_pay: '',
          paytype: '',
        },
        options: [{
          value: '广西壮族自治区',
          label: '广西壮族自治区',
          children: [{
            value: '南宁市',
            label: '南宁市',
            children: [{
              value: '兴宁区',
              label: '兴宁区',
            }, {
              value: '青秀区',
              label: '青秀区',
            }, {
              value: '江南区',
              label: '江南区',
            }, {
              value: '西乡塘区',
              label: '西乡塘区',
            }, {
              value: '良庆区',
              label: '良庆区',
            }, {
              value: '邕宁区',
              label: '邕宁区',
            }, {
              value: '武鸣区',
              label: '武鸣区',
            }, {
              value: '隆安县',
              label: '隆安县',
            }, {
              value: '马山县',
              label: '马山县',
            }, {
              value: '上林县',
              label: '上林县',
            }, {
              value: '宾阳县',
              label: '宾阳县',
            }, {
              value: '横县',
              label: '横县',
            }]
          }
          ],

        }],
        selectedOptions: [],
        tableData: [],
        currentPage:1,
        limit:30,
        total:50,
        fileList:[],
      }
    },
    async created () {
      this.getList();
    },
    methods: {
      uploadok(res){
        this.fileList.push(res)
      },
      handleSizeChange (val) {
        this.limit = val;
        this.getList();
      },
      handleCurrentChange (val) {
        this.currentPage  = val;
        this.getList();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file.url);
        window.open(
            file.url,'已上传的图片', 'height = 400px, width = 1200px, top = 50px, left = 50px, resizable = yes, location = yes'
        );
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      placeChange(value) {
        this.addhouse.haddress = value[0] + value[1] + value[2]
        this.addhouse.city = value[1];
        this.addhouse.area = value[2];
        this.edithouse.city = value[1];
        this.edithouse.area = value[2];
      },
      async getList () {
        try {
          const res = await this.$api.post('/house/Houselist', { limit:this.limit, page:this.currentPage });
          this.total = res.data.data.count;
          this.tableData = res.data.data.rows;
        } catch (e) {
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      async showMap(hid) {
        try {
          this.editHouseId = hid;
          let res = await this.$api.post('/house/gethousebyId', {hid});
          if (res.data.data.lng_lat === null) {
            this.mapdialog = true;
            this.$message.error('没有检测到经纬度数据，请尽快上传！');
          } else {
            let place = res.data.data.lng_lat.split(',');
            this.marplace.lng = place[0];
            this.marplace.lat = place[1];
            this.mapdialog = true;
          }
        } catch (e) {
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      pointChange(res){
        this.marplace = res.point;
      },
      async postPlace() {
        try{
          let place_info = this.marplace.lng+','+ this.marplace.lat;
          const res = await this.$api.post('/house/updataHouse',
              {
                hid: this.editHouseId,
                lng_lat: place_info,
              }
          );
          if (res.data.state == 1) {
            this.$message({ message: '设置地理位置成功！', type: 'success' });
            this.mapdialog = false;
            this.getList();
          } else {
            this.$message.error('设置地理位置失败!');
            this.mapdialog =false;
          }
        }catch (e) {
          this.$message.error('服务器异常，获取数据失败！')
        }
      },
      async search_info() {
        try {
          let not_null = [];
          for (let v in this.house) {
            if (this.house[v] !== '') {
              not_null.push(v);
            }
          }
          if (not_null.length > 0) {
            const res = await this.$api.post('/house/Houselist',
                {
                  hid: this.house.hid,
                  uid: this.house.uid,
                  limit:this.limit,
                  page:this.currentPage
                }
            );
            if (res.data.state == 1) {
              for(let v in this.house) {
                this.house[v] = '';
              }
              this.$message({ message: '查询成功！', type: 'success' });
              this.tableData = res.data.data.rows;
            } else {
              this.$message.error('查询失败！');
              this.getList();
            }
          }  else {
            this.$message.error('请至少输入一个字段进行查询！');
          }
        } catch (e) {
          this.$message.error('服务器异常，获取数据失败！');
        }

      },
      addHouse() {
        // 清空表单
        for(let v in this.addhouse) {
          this.addhouse[v] = '';
        }
        //显示弹窗
        this.addHousedialog = true;
      },
      async confirmAdd() {
        try {
          let is_null = [];
          for (let v in this.addhouse) {
            if(this.addhouse[v] === '') {
              is_null.push(v);
            }
          }
          if (is_null.length === 0 || this.addhouse.h_img === '') {
            let h_img = [];
            for(let v of this.fileList){
              h_img.push(v.url)
            }
            this.addhouse.h_img  = h_img.join(',');
            const res = await this.$api.post('/house/addHouse', this.addhouse);
            if (res.data.state == 1) {
              this.$message({ message: '添加成功！', type: 'success' });
              this.addHousedialog = false;
              this.getList();
            } else {
              this.$message.error('添加失败！');
              this.getList();
            }
          } else {
            console.log(is_null);
            this.$message.error('不能有数据为空！');
          }
        } catch (e) {
          this.$message.error('服务器异常，获取数据失败！');
        }

      },
      async editHouse(hid) {
        try {
          this.editHouseId = hid;
          const res = await this.$api.post('/house/gethousebyId',{hid: this.editHouseId});
          const {
            uid,
            htitle,
            hsquare,
            htype,
            haddress,
            city,
            area,
            tv,
            xyj,
            sfa,
            kdai,
            have,
            you_can,
            z_pay,
            f_pay,
            paytype,
            h_img} = res.data.data;
          this.edithouse =  {
            uid,
            htitle,
            hsquare,
            htype,
            haddress,
            city,
            area,
            tv,
            xyj,
            sfa,
            kdai,
            have,
            you_can,
            z_pay,
            f_pay,
            paytype,
            h_img
          };
          this.editHousedialog = true;
        } catch (e) {
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      async confirmEdit() {
        try {
          let is_null = [];
          for (let v in this.edithouse) {
            if (this.edithouse[v] === '') {
              is_null.push(v);
            }
          }
          if (is_null.length === 0 || this.edithouse.h_img === null) {
            let h_img = [];
            for(let v of this.fileList){
              h_img.push(v.url)
            }
            this.edithouse.hid = this.editHouseId;
            this.edithouse.h_img  = h_img.join(',');
            const res = await this.$api.post('/house/updataHouse', this.edithouse);
            if (res.data.state ==1) {
              this.$message({ message: '编辑成功！', type: 'success' });
              this.editHousedialog = false;
              this.getList();
            } else {
              this.$message.error('编辑失败！');
              this.getList();
            }
          } else {
            this.$message.error('不能有数据为空！')
          }
        } catch (e) {
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      deleteHouse(hid) {
        this.dialogVisible = true;
        this.delHouseId = hid;
      },
      async confirmDelete() {
        try {
          const res = await this.$api.post('/house/delHouse',{hid: this.delHouseId});
          if(res.data.state == '1'){
            this.$message({ message: '删除成功！', type: 'success' });
            this.dialogVisible = false;
            this.getList();
          } else {
            this.$message.error('删除失败！');
            this.getList();
          }
        } catch (e) {
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      Refresh() {
        window.location.reload();
      },
    }
  }
</script>

<style scoped>
  .bm-view {
    width: 100%;
    height: 300px;
    margin-bottom: 30px;
  }
  .bm-view {
    width: 100%;
    height: 300px;
  }
</style>
